import React from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import './userCenterStyle.less'
import classnames from 'classnames'

const mapStateToProps = (state) => {
  return {
    agentLevel: state.app.agentLevel,
    userInfo: state.app.userInfo,
    userFinanceInfo: state.app.userFinanceInfo,
    clubUrl: state.app.clubUrl,
    hallPage: state.app.hallPage,
  }
}

class UserCenter extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      cluburl: '',
      isiPhone: false,
      isAndroid: false,

    }
  }

  public componentDidMount() {
    let isiPhone = !!window.navigator.appVersion.match(/iPhone/i);

    this.setState({ cluburl: `${config.pre}/login/weiXin/${Cookies.get('areaCode')}?type=10106` , isiPhone: isiPhone})
    if(window.navigator) {
      if(window.navigator.appVersion.match(/Android/i)) {
        this.setState({
          isAndroid: true
        })
      }
    }

  }

  agentClick() {
    const host = window.location.host.match(/http/) ? window.location.host : 'http://' + window.location.host
    window.location.href = `${host}/AgentSystem/home_page.html?areaCode=${Cookies.get('areaCode')}&token=${Cookies.get('token')}`
  }

  preventClick(e) {
    e.preventDefault()
  }

  public render() {
    let {isAndroid} = this.state

    let mainClasses = classnames({
      'view-page': true,
      'user-center-view': true,
      'is-iPhone': this.state.isiPhone,
      'is-android': isAndroid,
    })
    let height;
    if(window.navigator.appVersion.match(/(iPhone|Android)/gi)){
    height = window.screen.width;
    }else {
      height = '100%'
    }
    let rotateBgStyle = {
      'height': height
    }

    return (

      <div className={mainClasses}>
        <div className="usercenter-top text-center">
          {/* <div className="mtr-2">{this.props.userInfo.nickname}<span className="agent">[{this.props.agentLevel}]</span></div> */}
          {/* <div className="mtr-3">
            <img className="user-center-diamond" src="img/userCenter/user-diamond.png" alt=""/>
            <span>{this.props.userFinanceInfo.amount}</span>
          </div> */}
          {/* <img className="ninedays-title" src="img/app/jiutian-hy-text.png" alt=""/> */}
        </div>
        <div className="usercenter-middle pure-g">
          <img className="background-img" src="img/userCenter/8-diagrams.png" style={rotateBgStyle} alt="" onClick={this.preventClick.bind(this)}/>
          <div className="flex-box"  style={rotateBgStyle}>
            <div className="flex-item"  style={rotateBgStyle}>
              <div className="pure-g animate-1">
                <NavLink to="/Service"><img src="img/userCenter/user-battles.png" alt="" className="usercenter-icon" /></NavLink>
              </div>
              <div className="pure-g animate-2">
                <NavLink to="/Rule">
                  <img src="img/userCenter/user-rules.png" alt="" className="usercenter-icon" />
                </NavLink>
              </div>
            </div>

            <div className="flex-item"  style={rotateBgStyle}>
              <div className="pure-g animate-3">
                <NavLink to="/Records"><img src="img/userCenter/user-record.png" alt="" className="usercenter-icon" /></NavLink>
              </div>
              <div className="pure-g ">
              <span className="my-icon">
                <img src="img/userCenter/my-bg.png" alt="" className="usercenter-icon"/>
              </span>
              </div>

              <div className="pure-g  animate-4">
                <NavLink to="/Auth"><img src="img/userCenter/user-auth.png" alt="" className="usercenter-icon" /></NavLink>
              </div>
            </div>

            <div className="flex-item"  style={rotateBgStyle}>
              <div className="pure-g  animate-5">
                <NavLink to="/Qualify"><img src="img/userCenter/coop-qualify.png" alt="" className="usercenter-icon" /></NavLink>
              </div>
              <div className="pure-g  animate-6">
                <img onClick={this.agentClick} src="img/userCenter/user-agent-center.png" alt="" className="usercenter-icon" />
              </div>
            </div>

          </div>

        </div>
        {/* <div className="usercenter-bottom">
          <img className="bar" src="img/app/kuang-bottom.png" alt=""/>
          <div className="text"><span>个人中心</span></div>
          <NavLink to="/App"><img className="back" src="img/app/back.png" alt=""/></NavLink>
        </div> */}
        <div className="home-nav">
          <img src="img/app/nav-di.png" className="full-width pos-abs di" alt="" />
          <div className="pure-g text-center">
            <div className="pure-u-1-4">
            <a href={this.props.hallPage}><img src="img/app/nav-mall.png" className="btn" alt=""/></a>
            </div>
            <div className="pure-u-1-4">
              <a href={this.state.cluburl}><img src="img/app/lower-club.png" className="btn" alt="" /></a>
            </div>
            <div className="pure-u-1-4">
              <NavLink to="/App"><img src="img/app/nav-home.png" className="btn" alt="" /></NavLink>
            </div>
            <div className="pure-u-1-4">
              {/*<img src="img/app/nav-selected.png" className="nav-selected" alt="" />*/}
              <NavLink to="/UserCenter"><img src="img/app/nav-my.png" className="btn" alt="" /></NavLink>
            </div>
          </div>
        </div>
      </div>
    )
  }

}

export default connect(mapStateToProps)(UserCenter)